<template>
  <div class="home">
    <!-- 二级导航 -->
    <div class="top">
          <router-link to="/er1">皮肤</router-link>
          <router-link to="/er2">字体</router-link>
          <router-link to="/er3">表情</router-link>
    </div>
    
   <!-- 二级导航的路由出口 -->
   <router-view></router-view> 

   <!-- 调用的底部组件 -->
   <Bottomfu class="fixed"/>
  </div>
</template>

<script>
import Bottomfu from "@/components/bottom/fu.vue"

export default {
  components:{
    Bottomfu
  },
  
    
}
</script>
<style scoped>
.top{
  width: 100%;
  height: 0.5rem;
  box-shadow: gray;
  display: flex;
  align-items: center;
  background:linear-gradient(to left,rgb(247, 243, 244),rgb(250, 224, 228)) ;
  position: sticky;
  top: 0;
  z-index: 11;
}
.con{
  width: 0.8rem;
  height:0.5rem;
  display: flex;
  flex-direction: column;
 justify-content: center;
}
a{
  width: auto;
  text-align: center;
  margin-right:30px
}
a:nth-of-type(1){
  margin-left:0.2rem
}
a:hover{
    color:orangered;
    font-size: 0.2rem;
    transition: all 0.5s;
}
.fixed{
  position: fixed;
  bottom: 0;
}
</style>